<template>
  <div class="box_tackOut">
    <div class="search_box">
      <el-form label-width="80px" inline>
        <el-form-item label="类别">
          <el-select-v2
            v-model="isCollect"
            :options="isCollectOpeions"
            placeholder="请选择"
            size="large"
            style="width: 240px"
            @change="getMenuInfo"
          />
        </el-form-item>
        <el-form-item label="名称">
          <el-input
            v-model="menuName"
            style="width: 240px"
            placeholder="请输入商家名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getMenuInfo"
            style="margin-right: 20px; margin-left: 20px"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="main_box">
      <el-card
        class="item_card"
        v-for="(item, index) in MenuData"
        :key="index"
        @click="buy(item.shopId)"
      >
        <template #header>
          <div class="card-header">
            <span>店铺名称:{{ item.shopName }}</span>
          </div>
        </template>
        <div class="item_img" v-show="item.shopImg">
          <el-image style="width: 200px" :src="item.shopImg" fit="cover" />
        </div>
        <el-empty v-show="!item.shopImg" description="暂无图片"></el-empty>
        <div>简介：{{ item.shopIntroduce ? item.shopIntroduce : "暂无简介" }}</div>
        <div style="margin-top: 4px">
          营业时间:{{
            item.businessStartTime && item.businessEndTime
              ? item.businessStartTime + "-" + item.businessEndTime
              : "未知"
          }}
        </div>
        <template #footer>
          <div style="display: flex; justify-content: space-between">
            <div>{{ item.businessState == 1 ? "营业" : "休业" }}</div>
            <div>{{ item.shopMasterId }}人收藏</div>
          </div>
        </template>
      </el-card>
    </div>

    <el-pagination
      class="pageNation"
      v-model:current-page="page"
      v-model:page-size="pageItem"
      :page-sizes="[10, 20, 30, 40]"
      background="blue"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import axios from "axios";
import { ElMessage } from "element-plus";
import Vue, { ref, reactive } from "vue";

const isCollect = ref(0);
const isCollectOpeions = [
  {
    value: 1,
    label: "个人收藏",
  },
  {
    value: 0,
    label: "全部",
  },
];
const page = ref(1);
const pageItem = ref(10);
const pageTotal = ref(0);
const menuName = ref("");
const token = localStorage.getItem("student_auth_token");
const dialogFormVisible = ref(false);
const MenuData = ref([]);
const formLabelWidth = "140px";
const form = reactive({
  id: "", //菜品的id
  menuName: "",
  menuPrice: 0,
  count: 0,
  demo: "",
  address: "",
  type: 1,
});

const buy = (id) => {
  router.push({ path: "/manager/order/shopInfo", query: { id: id } });
};

const getMenuInfo = () => {
  let url = "/api/shop/select/";
  if (isCollect.value == 1) {
    url = "/api/shop/select/collect/";
  }
  // console.log(isCollect.value, isCollect.value == 1);

  axios
    .get(
      url + page.value + "/" + pageItem.value + "?shopName=" + menuName.value, //其他不用修改，直接按照原来的
      {
        headers: {
          token: token,
        },
      }
    )
    .then((res) => {
      const msg = res.data.message;
      pageTotal.value = msg.total;
      msg.list.forEach((el) => {
        const arr = el.shopId.split(",");
        el.shopId = arr[0];
        el.collect = arr[1];
      });

      MenuData.value = msg.list;
      // console.log("MenuData.value :>> ", MenuData.value);
    });
};
getMenuInfo();

setInterval(getMenuInfo, 5000);

const handleSizeChange = (val: number) => {
  pageItem.value = val;
  getMenuInfo();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  getMenuInfo();
};
</script>

<style lang="scss" scoped>
.box_tackOut {
  width: 100%;

  .search_box {
    display: flex;
    width: 100%;
    justify-content: end;
    margin-top: 20px;
  }

  .main_box {
    margin-top: 2vh;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    .item_card {
      max-width: 30vw;
      min-width: 300px;
      margin: 30px;

      .item_img {
        margin: 15px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .pageNation {
    margin-top: 10vh;
  }
}
</style>
